<script setup>
// 定义 props
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  rows: {
    type: Number,
    default: 7
  },
  autosize: {
    type: Object,
    default: () => ({ maxHeight: '50vw', minHeight: 165 })
  },
  type: {
    type: String,
    default: 'textarea'
  },
  maxlength: {
    type: Number,
    default: 500
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  showWordLimit: {
    type: Boolean,
    default: true
  },
  inputAlign: {
    type: String,
    default: 'left'
  },
  required: {
    type: Boolean,
    default: false
  },
  rules: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:modelValue'])
const localValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
</script>

<template>
  <div class="pt-15px">
    <label
      class="relative px-16px text-16px font-400 leading-16px text-#54565C"
      :class="{ 'item-required': required }"
    >{{
      label
    }}</label>
    <van-field
      class="custom-textarea"
      name="opinion"
      v-model="localValue"
      :rows="rows"
      :autosize="autosize"
      :type="type"
      :maxlength="maxlength"
      :placeholder="placeholder"
      :show-word-limit="showWordLimit"
      :input-align="inputAlign"
      :rules="rules"
    />
  </div>
</template>

<style scoped lang="less">
.custom-textarea ::v-deep(.van-cell__value) {
  padding: 12px 0;
  background: #f8f9fb;
  border-radius: 4px;
  .van-field__control--left,
  .van-field__word-limit {
    padding: 0 10px;
  }
}
.item-required::before {
  position: absolute;
  right: 2.133vw;
  color: #ee0a24;
  font-size: 3.733vw;
  content: '*';
}
</style>
